<template>
	<div>
		<el-form size="mini">
			<el-row :gutter="10">
        <el-col style="width: 300px;display: flex;">
          <div class="item_label">渠道名称:</div>
           <el-date-picker v-model="filterData.daterange" size="mini" type="daterange" align="right" unlink-panels
           	range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" value-format="yyyy-MM-dd"
           	:picker-options="pickerOptions">
           </el-date-picker>
        </el-col>
				  <el-col style="width: 260px;display: flex;">
					 <div class="item_label">渠道名称:</div>
           <el-select v-model="filterData.platform" style="width: 100%;" size="mini" clearable>
           	<el-option v-for="(item,index) in platforms" :label="item.label" :key="item.index"
           		:value="item.label">
           	</el-option>
           </el-select>
				</el-col>
        <el-col style="width: 260px;display: flex;">
         <div class="item_label">外部单号:</div>
        	<el-input placeholder="外部单号" v-model="filterData.ouid" size="mini" clearable></el-input>
        </el-col>

        <el-col style="width: 260px;display: flex;">
         <div class="item_label">收款金额:</div>
        	<el-input placeholder="收款金额" v-model="filterData.amount" size="mini" clearable></el-input>
        </el-col>

        <el-col style="width: 260px;display: flex;" v-if="false">
         <div class="item_label">收款单位:</div>
        	<el-input placeholder="收款单位" v-model="filterData.supname" size="mini" clearable></el-input>
        </el-col>

        <el-col style="width: 260px;display: flex;">
         <div class="item_label">备注:</div>
        	<el-input placeholder="备注" v-model="filterData.memo" size="mini" clearable></el-input>
        </el-col>

				<el-col style="width: 100px;">
					<el-form-item label-width="0px">
						<el-button type="primary" icon="el-icon-search" @click="handleSearch">查 询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div style="height: 2px; border-bottom: 1px solid #E9E9E9; margin-bottom: 5px;"></div>

    <div class="table-wraper">
		<el-table :data="tableData" border  :header-cell-style="{background:'#f3f8ff'}" height="100%">
			<el-table-column prop="id" label="id" v-if="false"></el-table-column>
			<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
			<el-table-column type="expand" label="详情">

				<template v-slot="scope">
					<div style="margin-right:200px;">
						<el-table :data="scope.row.goods" border style="margin-left: 110px;">
							<el-table-column prop="sn" label="货号" align="center" width="120px"></el-table-column>
							<el-table-column prop="title" label="商品名称" align="left"></el-table-column>
							<el-table-column prop="count" label="数量" align="center" width="80px"></el-table-column>
							<el-table-column prop="price" label="单价" align="center" width="120px"></el-table-column>
							<el-table-column prop="total" label="小计" align="center" width="120px"></el-table-column>
							<el-table-column prop="supprice" label="折后单价" align="center" width="120px">
							</el-table-column>
							<el-table-column prop="suptotal" label="折后小计" align="center" width="120px">
							</el-table-column>
						</el-table>
					</div>
				</template>

			</el-table-column>
			<el-table-column prop="date" label="收款日期" align="left" width="160px"></el-table-column>
       <el-table-column prop="platform" label="订单渠道" align="center" width="160px"></el-table-column>
 		 	<el-table-column prop="ordercode" label="订单号" align="center"  width="160px"></el-table-column>
      <el-table-column prop="sum" label="订单额(元)" align="center" width="160px" ></el-table-column>
			<el-table-column prop="amount" label="金额(元)" align="center" width="160px" ></el-table-column>
      <el-table-column prop="supname" label="收款单位"></el-table-column>
			<el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column prop="account" label="所属账套"></el-table-column>
		</el-table>
    </div>
		<div style="margin-top: 10px; display: flex;">
					<div style="line-height: 30px; padding: 5px; flex:1;text-align: left;">收款总额:{{paysum}}</div>
					<el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
						layout=" prev, pager, next,sizes,total" :page-sizes="[25, 50, 80]" :total="total"
						:page-size="pagesize" :current-page="curpage" @size-change="handleSizeChange"
						@current-change="handleCurrentChange"></el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
        platforms:[],
				filterData: {
          platform:'',
					daterange:'',
					ordercode: '',
					amount: "",
					supname: '',
          goodtitle:''
				},
				tableData: [],
        paysum:0,
				//分页相关
				curpage: 1,
				pagesize: 25,
				total: 1,
			}
		},
		mounted() {
			this.loadDataList();
      this.loadPlatforms();
		},
		methods: {
      loadPlatforms: function() {
      	this.axios.post("api/admin/platform/list").then(res => {
      		if (res.status == 200 && res.data.code == 0) {
      			this.platforms = res.data.platforms;
      		}
      	})
      },
			handleSearch(){
				this.curpage=1;
				this.loadDataList();
			},
			handleSizeChange: function(val) {
				this.pagesize = val;
				this.curpage = 1;
				this.loadDataList();
			},
			handleCurrentChange: function(val) {
				this.curpage = val;
				this.loadDataList();
			},
			loadDataList: function() {
				let params = {
					daterange:this.filterData.daterange,
					ordercode: this.filterData.ordercode,
					amount: this.filterData.amount,
					platform: this.filterData.platform,
					curpage: this.curpage,
					pagesize: this.pagesize,
          goodtitle:this.filterData.goodtitle
				}
				this.axios.post("api/admin/income/list_by_page", params).then(res => {
					if (res.status == 200 && res.data.code == 0) {
						this.tableData = res.data.list;
						this.curpage = res.data.curpage;
						this.total = parseInt(res.data.total);
						this.pagesize = parseInt(res.data.pagesize);
            this.paysum=parseFloat(res.data.paysum);
					}
				})
			}
		}
	}
</script>

<style scoped>
  .table-wraper{
    height:calc(100vh - 240px)
  }

    .item_label {
      text-align: center;
      line-height: 30px;
      margin:0px 2px;
      width: 95px;
   }

</style>
